<template>
	<view class="map">
		<view class="content uv-flex-row">
			<template v-for="(item,index) in mapList" :key="index">
				<navigator :url="`/pages/course/course?category=${item.category}`" class="item" hover-stop-propagation v-if="showItem(item)">
					<view class="active" style="background: #fff;" v-if="isActiveAddress(item)">
						<uv-icon name="empty-address" :label="`您当前位于课程：${isActiveAddress(item).name}`"></uv-icon>
					</view>
					<view class="progress" style="margin: 20px auto 0;">{{completeProgress(item)}}</view>
					<image :src="item.logo.url || item.logo" mode="aspectFit"></image>
				</navigator>
			</template>
		</view>
	</view>
</template>
<script setup>
	import { computed, reactive, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { checkLocalCharacter } from '@/common/js/character.js';
	import { getCategoryComplete, getCourseLastActive } from '@/common/js/getData.js';
	import useInit from '@/common/hooks/useInit.js';
	import { categoryCourseList } from '@/common/api/list.js';
	useInit('reloadMapData', getComplete);
	try {
		checkLocalCharacter();
		uni.$emit('initData');
		// 获取最后选中课程
		getCourseLastActive();
	} catch (e) {}
	const type = ref('basic-fingering');
	const completeResult = ref([]);
	onLoad((options) => {
		if (options.chapter) {
			type.value = options.chapter;
			getComplete();
			getCategoryCourseList();
		}
	})
	const mapList = computed(() => {
		const _list = getApp().globalData.dzdata?.userChapterList ? getApp().globalData.dzdata?.userChapterList : [];
		const _item = _list.find(item => item.chapter == type.value);
		return _item?.categoryList;
	})
	const showItem = computed((item) => {
		return item => {
			return item.chapter == type.value;
		}
	})
	// 进度
	const completeProgress = computed((item) => {
		return item => {
			const findItem = completeResult.value.find(item2 => item2.category == item.category);
			if (findItem) {
				const { completedCourses, totalCourses } = findItem;
				return `${completedCourses}/${totalCourses}`;
			} else {
				return '';
			}
		}
	})
	// 当前位置
	const isActiveAddress = computed((item) => {
		return item => {
			return getApp().globalData.dzdata?.lastActive?.category == item.category ? getApp().globalData.dzdata?.lastActive : null;
		}
	})
	// 获取完成度相关数据
	async function getComplete() {
		const res = await getCategoryComplete({
			chapter: type.value
		});
		completeResult.value = res;
	}
	// 预加载category+courseList
	async function getCategoryCourseList() {
		const { data } = await categoryCourseList({
			chapter: type.value
		})
		getApp().globalData.setdzdata('categoryList', data);
	}
</script>
<style scoped lang="scss">
	.content {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		image {
			width: 240px;
		}
		.progress {
			width: 100px;
			border-radius: 2px;
			background: rgba(0, 0, 0, 0.1);
		}
	}
</style>